<template>
    <div class="chat-chunk">
        <svg style="position: absolute;width: 0px;height: 0px;overflow: hidden;">
            <symbol id="icon-sound" viewBox="0 0 1024 1024">
                <path d="M297.505158 370.251921c-1.220914-1.220914-2.55998-2.252783-3.796648-3.434312L150.388997 510.144999l147.116161 147.116161c79.25699-79.25699 79.25699-207.752248 0-287.009239zM472.899255 194.865701c-1.213037-1.213037-2.489089-2.331551-3.710003-3.528834l-63.778955 63.778955c1.228791 1.189406 2.496965 2.315798 3.710002 3.528835 140.672887 140.672887 140.672887 369.566634 0 510.231644l63.778956 63.778955c175.835201-175.835201 175.835201-461.954354 0-637.789555z"></path>
                <path d="M664.236121 3.528834c-1.213037-1.213037-2.489089-2.323674-3.710002-3.528834l-63.778956 63.778956c1.220914 1.197283 2.496965 2.315798 3.710003 3.528834 246.175583 246.175583 246.175583 646.729794 0 892.905378l63.778955 63.778955c281.345774-281.345774 281.345774-739.117514 0-1020.463289z"></path>
            </symbol>
        </svg>
        <div class="chat-time" v-if="diffTime">{{diffTime}}</div>
        <div class="chat-msg" :class="{'chat-msg-self':isSelf}">
            <div class="chat-msg-face" @click="clickFace" :style="`background-image:url(${faceUrl})`"></div>
            <div class="chat-msg-content" @click="clickMsg">
                <div class="chat-msg-inner">
                    <img class="chat-msg-img" :class="{'chat-msg-image-long':isLongPicture}" :src="text+'?imageView2/0/h/200'" v-if="type===2" @load="loadImage"/>
                    <div class="chat-msg-sound" v-else-if="type===3">
                        <svg class="svg" aria-hidden="true">
                            <use xlink:href="#icon-sound"></use>
                        </svg>
                        <div class="chat-msg-sound-text">点击播放语音</div>
                    </div>
                    <div class="chat-msg-map" v-else-if="type===4">
                        <div class="chat-msg-map-image" :style="'background-image:url('+tiledSrc+')'"></div>
                        <div class="chat-msg-map-text">
                            <div class="chat-msg-map-name">{{mapName}}</div>
                            <div class="chat-msg-map-position">{{mapPosition}}</div>
                        </div>
                    </div>
                    <div class="chat-msg-text" v-else-if="type >100">
                        <slot name="content"></slot>
                    </div>
                    <div class="chat-msg-text" v-else v-html="text">
                    </div>
                </div>
                <div class="chat-msg-content-arrow"></div>
            </div>
            <div class="status-slot">
                <slot name="status"></slot>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Vue, Watch, Emit} from "vue-property-decorator";

    @Component({components: {}})
    //聊天框
    export default class ChatBox extends Vue {

        //是否是自己的消息
        @Prop({default: false, type: Boolean})
        private isSelf!: boolean;

        //消息类型
        @Prop({default: 1, type: Number})
        private type!: number;

        //消息文本
        @Prop({default: ""})
        private text!: string;


        //经度
        @Prop({default: 0, type: Number})
        private longitude!: number;

        //纬度
        @Prop({default: 0, type: Number})
        private latitude!: number;

        //瓦片图
        @Prop({default: "", type: String})
        private tiledSrc!: string;

        //当前位置名称
        @Prop({default: "", type: String})
        private mapName!: string;

        //当前位置详情
        @Prop({default: "", type: String})
        private mapPosition!: string;

        //头像
        @Prop({default: "", type: String, required: true})
        private faceUrl!: string;

        //本条消息时间
        @Prop({default: Date.parse(String(new Date())) / 1000, type: Number})
        private thisTime!: string;

        //上条消息时间
        @Prop({default: 0, type: Number})
        private prevTime!: string;

        private get isLongPicture(): boolean {
            if (this.type === 2) {
                const image = new Image();
                image.src = this.text;
                console.log(11);
                if ((image.height / image.width) > 2 && image.height > document.body.clientHeight) {
                    return true;
                }
            }
            return false;
        }

        private get diffTime(): string {
            const newTime: number = Date.parse(String(new Date())) / 1000;
            const diffTimeNumber: number = Number(this.thisTime) - Number(this.prevTime);
            if (diffTimeNumber < 30) {
                return "";
            } else if (diffTimeNumber < 60 || this.formatTime(newTime).split(" ")[0] === this.formatTime(Number(this.thisTime)).split(" ")[0]) {
                return this.formatTime(Number(this.thisTime)).split(" ")[1];
            } else {
                return this.formatTime(Number(this.thisTime));
            }
        }

        private addZore(n: number): string {
            return n < 10 ? "0" + String(n) : String(n);
        }

        private formatTime(time: number): string {
            const timeData = new Date(time * 1000);
            const y = timeData.getFullYear();
            const m = timeData.getMonth() + 1;
            const d = timeData.getDate();
            const h = timeData.getHours();
            const mm = timeData.getMinutes();
            const s = timeData.getSeconds();
            return y + "年" + this.addZore(m) + "月" + this.addZore(d) + "日 " + this.addZore(h) + ":" + this.addZore(mm) + ":" + this.addZore(s);
        }

        @Emit("loadImage")
        private loadImage(): void {
        }

        @Emit("clickFace")
        private clickFace(): void {
        }

        @Emit("clickMsg")
        private clickMsg(): void {

        }
    }
</script>

<style scoped lang="stylus">
    .chat-msg
        padding 8px;
        clear both;
        margin-bottom 10px;

        &::before, &::after
            content '';
            display block;
            height 0;
            clear both;
            visibility hidden;

        .chat-msg-face
            width 40px;
            height 40px;
            display inline-block;
            border-radius 40px;
            float left;
            background-repeat no-repeat;
            background-position center center;
            background-size cover;

        .status-slot
            float left;

        .chat-msg-content
            display inline-block;
            border-radius 7px;
            background-color #FFFFFF;
            color #333;
            overflow hidden;
            position relative;
            margin 0 10px;
            max-width 70vw;
            min-width 35px;
            float left;

            .chat-msg-inner
                overflow-x hidden;
                line-height 1.4;
                font-size 15px;
                min-height 21px;
                letter-spacing .3px;
                word-break break-word;
                position relative;

                .chat-msg-text
                    padding 10px;
                    display flex;
                    align-items center;
                    flex-wrap wrap;


                .chat-msg-img
                    width 100%;
                    height auto;
                    display block;


                .chat-msg-image-long
                    height 70vh !important;
                    width auto !important;

                .chat-msg-sound
                    display flex;
                    justify-content center;
                    align-items center;
                    color #666;
                    height 40px;
                    padding 10px;

                    .chat-msg-sound-text
                        padding-left 10px;
                        font-size 14px;

                .chat-msg-map
                    width 250px;

                    .chat-msg-map-image
                        height 150px;
                        width 250px;
                        background-repeat no-repeat;
                        background-size cover;
                        background-position center center;

                    .chat-msg-map-text
                        height 65px;
                        padding 10px 15px;

                        .chat-msg-map-name
                            height 27px;
                            line-height 27px;
                            overflow hidden
                            text-overflow ellipsis;
                            white-space nowrap
                            font-size 16px;

                        .chat-msg-map-position
                            height 18;
                            line-height 18px;
                            overflow hidden
                            text-overflow ellipsis;
                            white-space nowrap;
                            font-size 12px;
                            color #7a7a7a;


            .chat-msg-content-arrow
                position absolute;
                border-right none;
                border-top none;
                background-color #FFFFFF;
                width 10px;
                height 10px;
                left -5px;
                top 5px;
                transform rotateZ(45deg);
                z-index -1
                display none;

    .chat-msg-self
        .chat-msg-face
            float right;

        .chat-msg-content
            float: right;

            .chat-msg-content-arrow
                left auto !important;
                right -5px;
                transform rotateZ(225deg);

        .status-slot
            float right;

    .svg
        width 16px;
        height 16px;
        vertical-align -2.5px;
        fill currentColor;
        overflow hidden;

    .chat-time
        height 15px;
        padding 0 10px;
        width max-content;
        margin auto;
        background #ccc;
        font-size 10px;
        color #fff;
        line-height 15px;
        border-radius 15px;
</style>
